<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <style>
        html,
        body {
            background-color: #f1f5f9;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .container-personal {
            margin: 50px auto;
            width: 80%;
            max-width: 1800px;
            display: flex;
            flex-direction: column;
            align-items: center;

        }

        .profile-card {
            width: 100%;
            max-width: 400px;
            border-radius: 10px;
            border: 1px gray solid;
            background-color: white;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        .profile-card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 20px;
        }

        .profile-card h2 {
            margin: 0;
            font-size: 24px;
        }

        .profile-card p {
            margin: 10px 0;
            font-size: 16px;
            color: #666;
        }

        .links {
            margin-top: 20px;
        }

        .links a {
            color: #007bff;
            text-decoration: none;
            margin: 0 10px;
            font-size: 16px;
        }

        .links a:hover {
            text-decoration: underline;
        }

        /* 借阅记录表格样式 */
        .borrowed-books-table {
            width: 700px;
            width: 100%;
            max-width: 600px;
            margin-top: 20px;
            border-collapse: collapse;
            text-align: left;
        }

        .borrowed-books-table th,
        .borrowed-books-table td {
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }

        .borrowed-books-table th {
            background-color: #f4f4f4;
        }

        .borrowed-books-table tr:hover {
            background-color: #f9f9f9;
        }

        .fine-paid {
            color: green;
        }

        .fine-unpaid {
            color: red;
        }
    </style>
     <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/common.css">
</head>

<body>
    <header>
        <div class="wel" style="margin-top:10px;">
            <h3>欢迎来到强哥图书管理系统</h3>
        </div>
        <nav>

            <ul id="nav-list" style=" margin-top:19px;"></ul>
        </nav>
    </header>
    <div class="container-personal">
        <h1>个人中心</h1>
        <div class="profile-card">
            <img src="pic/zhou.png" width="350px" alt="用户头像">
            <div  style="height: 20px;font-weight: bold;font-size:17PX">姓名：张三</div>
            <p>邮箱: user@example.com</p>
            <p>手机号: 123-456-7890</p>
            <div class="links">
                <a href="#">设置</a>
                <a href="#">消息</a>
                <a href="#">退出</a>
            </div>
        </div>
        <div class="borrowed-books">
            <table class="borrowed-books-table" id="borrowedBooksTable">
                <thead>
                    <tr>
                        <th>借阅书籍名称</th>
                        <th>借阅时期</th>
                        <th>应还时期</th>
                        <th>实际归还时期</th>
                        <th>是否罚款</th>
                        <th>罚款金额</th>
                        <th>是否支付</th>
                    </tr>
                </thead>
                <tbody id="borrowedBooksContainer">
                    <!-- 借阅记录将通过JavaScript动态添加到这里 -->
                </tbody>
            </table>
        </div>
    </div>


    
    <script>

        const storedData = JSON.parse(localStorage.getItem('loginData')) || {};
        console.log("storedData", storedData);
        const userRole = storedData || 'guest'; // 假设用户数据中有一个'role'字段
        console.log("userRole", userRole);
        // 获取导航列表的DOM元素
        const navList = document.getElementById('nav-list');

        // 创建一个函数来添加导航项
        function addNavItem(text, href) {
            const li = document.createElement('li');
            const a = document.createElement('a');
            a.href = href;
            a.textContent = text;
            li.appendChild(a);
            navList.appendChild(li);
        }

        // 根据用户角色添加相应的导航项
        if (userRole === 'admin') {
            addNavItem('登录', 'login.html');
            addNavItem('注册', 'register.html');
            addNavItem('图书列表', 'book_list.html');
            addNavItem('归还图书', 'return_list.html');
            addNavItem('采购界面', 'purchase.html');
            addNavItem('个人中心', 'personal_admin.html');
        } else if (userRole === 'user') {
            addNavItem('登录', 'login.html');
            addNavItem('注册', 'register.html');
            addNavItem('图书列表', 'book_list_B.html');
            addNavItem('个人中心', 'personal.html');
            // ... 其他用户可见的链接
        } else {
            // 对于未登录或未知角色的用户，可能只显示登录链接
            addNavItem('登录', 'login.html');

        }


      
       
        getBorrowedBooks();
        console.log("loa", window.location);
        function getBorrowedBooks() {
            $.ajax({
                url: "/book/getBorrowedBooks",
                type: "get",
                success: (body) => {
                    try {
                        if (body && body.code === "NOLOGIN") {
                            location.href = "login.html";
                        }
                        var result = body;
                        console.log("Response body:", body);

                        if (!result) {
                            alert("无数据或数据格式不正确");
                            return;
                        }
                        console.log("Data:", result);

                        var records = result;
                        if (records == null) {
                            return;
                        }
                        var finalHTML = "";
                        for (var record of records) {
                            finalHTML += '<tr>';
                            finalHTML += '<td>' + record.bookName + '</td>'; // 使用 <td> 而不是 <th>
                            finalHTML += '<td>' + record.borrowDate + '</td>';
                            finalHTML += '<td>' + record.dueDate + '</td>';
                            finalHTML += '<td>' + record.actualReturnDate + '</td>';
                          
                           
                            if( record.hasFine == 1){
                                record.hasFine= "是";
                            }else{
                                record.hasFine= "否";
                            }
                            if(record.finePaid == 1){
                                record.finePaid="已支付"
                            }else{
                                record.finePaid="未支付"
                            }
                            console.log("record.hasFine",record.hasFine);
                            finalHTML += '<td>' + record.hasFine + '</td>';
                            finalHTML += '<td>' + record.fineAmount + '</td>';
                            finalHTML += '<td>' + record.finePaid + '</td>';
                            finalHTML += ' </tr>';

                        }
                        var finalHTML1 = "";
                        $("tbody").html(finalHTML);
                    } catch (error) {
                        console.error("Error processing response:", error);
                        alert("处理响应时发生错误");
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    console.error("AJAX error:", textStatus, errorThrown);
                    alert("请求失败，请稍后再试");
                }
            });
        }
    </script>

</body>

</html>